import React, {useEffect, FC} from 'react';
import ReactDom from 'react-dom';
import style from './demoStyle';  // 或者使用 import './demoStyle'
import SubCom from './demo2'
import {myTool1} from './tool'
import img from './imgs/key'
import {
  Button,
  TimePicker,
  Checkbox
} from 'antd';
/*
import Button from 'antd/lib/button';
import TimePicker from 'antd/lib/time-picker';
import Checkbox from 'antd/lib/checkbox';
*/
interface IProps{
  name?: string
}

const TSCom: FC<IProps> = (props: any) => {
  useEffect(()=>{
    console.log("style:", style)
    myTool1(1);
  },[])
  return (
    <div>
      <style dangerouslySetInnerHTML={{ __html: JSON.stringify(style) }} />
       <p>sass</p>
       aaaaaaaaaaaaaa 我改变了demo.tsx

       <br/>
       <br/>
       <img style={{width:'60px', height:'60px'}} src={img} alt="img" />
       <TimePicker onChange={(a, b)=>{console.log("change....")}} />
       <Button type="primary">antd btn</Button>
       <Checkbox onClick={()=>{console.log('......')}}>Checkbox</Checkbox>
       <SubCom />
       <div className="img_box"></div>
    </div>
  )
}

ReactDom.render(<TSCom name="组件props" />, document.getElementById("container"))
